<template>
  <div style="height:100%">
    <div class="box">
      <div class="model">
        <h1>后台项目管理</h1>
        <el-form
          :model="formuser"
          ref="formref"
          :rules="formrules"
        >
          <el-form-item prop="username">
            <el-input
              v-model="formuser.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formuser.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button
              type="primary"
              @click="login"
            >登录</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="logo">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formuser: {
        username: "",
        password: ""
      },
      formrules: {
        username: [
          { required: "true", message: "请输入用户名", trigger: "blur" },
          { max: 10, min: 5, message: "请输入5—10字符", trigger: "blur" }
        ],
        password: [
          { required: "true", message: "请输入密码", trigger: "blur" },
          { max: 10, min: 5, message: "请输入5—10字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    login() {
      console.log(this.$refs.formref);
      this.$refs.formref.validate(async valid => {
        console.log(valid);
        if (valid) {
          let res = await this.$API.loginform(this.formuser);
          console.log(res);
        }
      });
    }
  }
};
</script>

<style scoped >
.box {
  width: 100%;
  background: #2b4b6b;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.model {
  width: 500px;
  height: 300px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  padding: 15px 20px;
  box-sizing: border-box;
  text-align: center
}
.btn {
  text-align: right;
}
</style>
